<template>
  <view class="user">
    <!-- 用户头像昵称 -->
    <view class="nikename">
      <view class="icon"><image :src="userinfo.avatarUrl" mode="widthFix"></image></view>
      <text>{{ userinfo.nickName }}</text>
    </view>
    <!-- 面板区域 -->
    <view class="panel-list">
      <!-- 第一个面板 -->
      <view class="panel1">
        <view class="panel1-item">
          <text>8</text>
          <text>收藏的店铺</text>
        </view>
        <view class="panel1-item">
          <text>14</text>
          <text>收藏的商品</text>
        </view>
        <view class="panel1-item">
          <text>18</text>
          <text>关注的商品</text>
        </view>
        <view class="panel1-item">
          <text>85</text>
          <text>足迹</text>
        </view>
      </view>
      <!-- 第二个面板 -->
      <view class="panel2">
        <view class="pheader">
          我的订单
        </view>
        <view class="picon">
          <view class="panel2-item">
            <image src="/static/my-icons/icon1.png" mode=""></image>
            <view class="ptext">
              待付款
            </view>
          </view>
          <view class="panel2-item">
            <image src="/static/my-icons/icon2.png" mode=""></image>
            <view class="ptext">
              待收货
            </view>
          </view>
          <view class="panel2-item">
            <image src="/static/my-icons/icon3.png" mode=""></image>
            <view class="ptext">
              退款/退货
            </view>
          </view>
          <view class="panel2-item">
            <image src="/static/my-icons/icon4.png" mode=""></image>
            <view class="ptext">
              全部订单
            </view>
          </view>
        </view>
      </view>
      <!-- 第三个面板 -->
      <view class="panel3">
        <view class="panel3-item">
          <text>收货地址</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </view>
        <view class="panel3-item">
          <text>联系客服</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </view>
        <view class="panel3-item" @click="logout">
          <text >退出登录</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState('user', ['userinfo'])
  },
  methods: {
    ...mapMutations('user', ['updateAddress', 'updateUserInfo', 'updateToken']),
    // 用户退出登录
    logout() {
      const that = this
      uni.showModal({
        content: '确定退出登录吗?',
        success (res) {
          if (res.confirm) {
            that.updateAddress({})
            that.updateUserInfo({})
            that.updateToken('')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  },
  onLoad() {
    console.log(this.userinfo);
  }
};
</script>

<style lang="scss">
.user {
  height: 100%;
  background-color: #efefef;
  .nikename {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400rpx;
    background-color: #ff3f34;
    .icon {
      width: 100px;
      height: 100px;
      margin-bottom: 5px;
      border-radius: 100px;
      border: solid 2px #fff;
      box-shadow: 1px 1px 5px 0 #000;
      image {
        width: 100%;
        border-radius: 100px;
      }
    }
    text {
      color: #fff;
      font-weight: 700;
    }
  }
  .panel-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-20px);
    .panel1 {
      display: flex;
      justify-content: space-around;
      width: 90%;
      padding: 10px 0;
      background-color: #fff;
      border-radius: 5px;
      .panel1-item {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    .panel2 {
      margin: 8px 0;
      width: 90%;
      padding: 10px 0;
      border-radius: 5px;
      background-color: #fff;
      .pheader {
        padding-left: 10px;
        font-size: 14px;
        margin-bottom: 20px;
      }
      .picon {
        display: flex;
        justify-content: space-around;
        .panel2-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          image {
            width: 35px;
            height: 35px;
          }
        }
      }
    }
    .panel3 {
      width: 90%;
      background-color: #FFFFFF;
      border-radius: 5px;
      // padding: 10px;
      .panel3-item {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
      }
    }
  }
}
</style>
